<template>
  <!-- 只读页面 -->
  <div>
    <SearchForm
      :formConifg="searchFormConifg"
      :formData="searchFormData"
      :operateProps="searchOperate"
    ></SearchForm>
    <BasicTable
      :tableData="tableData"
      :tableConifg="tableConifg"
      :paginationProps="paginationProps"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></BasicTable>
  </div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { SearchForm } from '@com/Form/index';
import { BasicTable } from '@com/Table/index';
import { tableConifg, searchFormConifg } from './config';
import { useBaseTable } from '@/hooks/useBaseTable';
import { getTableDataAPI } from '@/mock/readOnlytable';

onMounted(() => {
  getTableList();
});

const {
  paginationProps,
  tableData,
  searchFormData,
  getTableList,
  searchHandle,
  resetHandle,
  handleSizeChange,
  handleCurrentChange,
} = useBaseTable({
  searchFormConifg,
  tableConifg,
  getDataAPI: getTableDataAPI,
});

//查询组件操作配置
const searchOperate = [
  {
    text: '查询',
    handle: searchHandle,
  },
  {
    text: '重置',
    handle: resetHandle,
  },
];
</script>
